﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>huehue</title>
		<link href="style.css" type="text/css" rel="stylesheet"/>
		<link href="input.css" type="text/css" rel="stylesheet"/>
	
		<script type='text/javascript' src='jquery.js'></script>
		<script type="text/javascript">
			var datefield = document.createElement("input")
			datefield.setAttribute("type", "date")
			if(datefield.type != "date") {//if browser doesn't support input type="date", load files for jQuery UI Date Picker
				document.write('<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />\n')
				document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"><\/script>\n')
				document.write('<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"><\/script>\n')
			}
		</script>
		<script>
			if(datefield.type != "date") {//if browser doesn't support input type="date", initialize date picker widget:
				jQuery(function($) {//on document.ready
					$('#travel1').datepicker();
					$('#travel2').datepicker();
				})
			}
		</script>
		<script type="text/javascript">
			function hotelRoomPrice(int) {
				if(int == 1) {
					if(document.select1form.select1.value == "Klass 3") {
						document.getElementById("hotel1pris").innerHTML="Pris: 350 €";
					} else if (document.select1form.select1.value == "Klass 2") {
						document.getElementById("hotel1pris").innerHTML="Pris: 450 €";
					} else if (document.select1form.select1.value == "Klass 1") {
						document.getElementById("hotel1pris").innerHTML="Pris: 500 €";
					} else if (document.select1form.select1.value == "Storlyx") {
						document.getElementById("hotel1pris").innerHTML="Pris: 1000 €";
					} else { document.getElementById("hotel1pris").innerHTML="Pris: 1000 €"}
				}

				if(int == 2) {
					if(document.select2form.select2.value == "Standard") {
						document.getElementById("hotel2pris").innerHTML="Pris: 200 €";
					} else if (document.select2form.select2.value == "Awesome") {
						document.getElementById("hotel2pris").innerHTML="Pris: 250 €";
					} else if (document.select2form.select2.value == "Super Awesome") {
						document.getElementById("hotel2pris").innerHTML="Pris: 300 €";
					} 
				}

				if(int == 3) {
					if(document.select3form.select3.value == "Dubbelbäddsrum") {
						document.getElementById("hotel3pris").innerHTML="Pris: 140 €";
					} else if (document.select3form.select3.value == "Singelbäddsrum") {
						document.getElementById("hotel3pris").innerHTML="Pris: 150 €";
					} 
				}

			}
		</script>
	<script type="text/javascript" charset="utf-8">
		var from = 0;
		var to = 0;
		var date1 = 0;
		var date2 = 0;
		var num = 0;
		var sum = 0;
		
		var step2_from = 0;
		var step2_to = 0;
		
		var step3_hotel = 0;
		
		function scroll(id) {
		

        // An offset to push the content down from the top.
        var offset = 20;

        // Our scroll target : the top position of the
        // section that has the id referenced by our href.
        var target = $(id).offset().top - offset;

        // The magic...smooth scrollin' goodness.
        $('html, body').animate({scrollTop:target}, 500);

        //prevent the page from jumping down to our section.
        event.preventDefault();
		}


		
		function update1() {
			sum = from + to + date1 + date2 + num;
			if(sum >= 5)
			{
				document.getElementById("info1").innerHTML="Bra, tryck här eller scrolla";
				show('step2');
				document.getElementById("info1").style.backgroundColor = '#1f0';
			}
			else
			{
				document.getElementById("info1").innerHTML="Fyll i kvarvarande " + (5 - sum) + " fält för att fortsätta.";
				document.getElementById("info1").style.backgroundColor = '#f10';
			
			}
		}
		
		function show(id) {
			document.getElementById(id).style.display = 'block';
		}
		
		$(document).ready(function(){
			//$("#adults").attr('disabled', true);
			update1();
			updateStep2();
			updateStep3(); 
			
			document.getElementById('step2').style.display = 'none';
			document.getElementById('step3').style.display = 'none';
			document.getElementById('step3').style.display = 'none';
			document.getElementById('step4').style.display = 'none';
			
			$("#from").change(function(){
				from = 1;
				update1();
			})
			
			$("#destination").change(function(){
				to = 1;
				update1();
			})
			
			$("#travel1").change(function(){
				date1 = 1;
				update1();
			})
			
			$("#travel2").change(function(){
				date2 = 1;
				update1();
			})
			
			$("#adults").change(function(){
				num = 1;
				update1();
			})
			
			$("#adults").keydown(function(){
				num = 1;
				update1();
			})
			
    $('#info1').click(function(event) {
		if(sum >= 5)
			scroll("#step2");
    });
			
    $('#info2').click(function(event) {
		if(step2_to + step2_from >= 2) {
			scroll("#step3");
		}
    });
	
    $('#info3').click(function(event) {
		if(step3_hotel >= 1) {
			scroll("#step4");
		}
    });
	
    $('#plane1').click(function(event) {
		document.getElementById("plane1").style.borderColor = '#0b0';
		document.getElementById("plane1").style.backgroundColor = '#bbfddf';
				
		document.getElementById("plane2").style.borderColor = '#444';
		document.getElementById("plane2").style.backgroundColor = '#bbedef';
		
		step2_to = 1;
		updateStep2();
    });
	
    $('#plane2').click(function(event) {
		document.getElementById("plane2").style.borderColor = '#0b0';
		document.getElementById("plane2").style.backgroundColor = '#bbfddf';
				
		document.getElementById("plane1").style.borderColor = '#444';
		document.getElementById("plane1").style.backgroundColor = '#bbedef';
		
		step2_to = 1;
		updateStep2();
    });
	
    $('#plane3').click(function(event) {
		document.getElementById("plane3").style.borderColor = '#0b0';
		document.getElementById("plane3").style.backgroundColor = '#bbfddf';
				
		document.getElementById("plane4").style.borderColor = '#444';
		document.getElementById("plane4").style.backgroundColor = '#bbedef';
		
		step2_from = 1;
		updateStep2();
    });
	
    $('#plane4').click(function(event) {
		document.getElementById("plane4").style.borderColor = '#0b0';
		document.getElementById("plane4").style.backgroundColor = '#bbfddf';
				
		document.getElementById("plane3").style.borderColor = '#444';
		document.getElementById("plane3").style.backgroundColor = '#bbedef';
		
		step2_from = 1;
		updateStep2();
    });
	
	
	
		function updateStep2() {
			if(step2_to + step2_from >= 2) {
				document.getElementById("info2").style.backgroundColor = '#1f0';
				document.getElementById("info2").innerHTML="Bra, tryck här eller scrolla";
				show('step3');			
			}
			else {
				document.getElementById("info2").style.backgroundColor = '#f10';
				document.getElementById("info2").innerHTML="";
				if(step2_to == 0)
					document.getElementById("info2").innerHTML+="Välj utresa<br/>";
				if(step2_from == 0)
					document.getElementById("info2").innerHTML+="Välj hemresa<br/>";
			}
		}
	
		function updateStep3() {
			if(step3_hotel >= 1) {
				document.getElementById("info3").style.backgroundColor = '#1f0';
				document.getElementById("info3").innerHTML="Bra, tryck här eller scrolla";
				show('step4');			
			}
			else {
				document.getElementById("info3").style.backgroundColor = '#f10';
				document.getElementById("info3").innerHTML="Välj hotell";
			}
		}
		
		
	
    $('#hotel1').click(function(event) {
		document.getElementById("hotel1").style.borderColor = '#0b0';
		document.getElementById("hotel1").style.backgroundColor = '#bbfddf';
				
		document.getElementById("hotel2").style.borderColor = '#444';
		document.getElementById("hotel2").style.backgroundColor = '#cbddef';
		
		document.getElementById("hotel3").style.borderColor = '#444';
		document.getElementById("hotel3").style.backgroundColor = '#cbddef';
		
		step3_hotel = 1;
		updateStep3();
    });
	
    $('#hotel2').click(function(event) {
		document.getElementById("hotel2").style.borderColor = '#0b0';
		document.getElementById("hotel2").style.backgroundColor = '#bbfddf';
				
		document.getElementById("hotel1").style.borderColor = '#444';
		document.getElementById("hotel1").style.backgroundColor = '#cbddef';
		
		document.getElementById("hotel3").style.borderColor = '#444';
		document.getElementById("hotel3").style.backgroundColor = '#cbddef';
		
		step3_hotel = 1;
		updateStep3();
    });
	
	
    $('#hotel3').click(function(event) {
		document.getElementById("hotel3").style.borderColor = '#0b0';
		document.getElementById("hotel3").style.backgroundColor = '#bbfddf';
				
		document.getElementById("hotel2").style.borderColor = '#444';
		document.getElementById("hotel2").style.backgroundColor = '#cbddef';
		
		document.getElementById("hotel1").style.borderColor = '#444';
		document.getElementById("hotel1").style.backgroundColor = '#cbddef';
		
		step3_hotel = 1;
		updateStep3();
    });
		})
	</script>
	</head>
	<body>
		<div id="main" >
			<div id="top" ></div>
			<div id="step1" >
				<form>
					<fieldset id='field1'>
						<legend>
							Steg 1
						</legend>
						
						<input type="text" id="from" name="from" required placeholder="Från" list="airports" />
						<input type="text" id="destination" name="destination" required placeholder="Till" list="airports"/>
						<input type="date" id="travel1" name="travel1" required placeholder="Avresedatum" />
						<input type="date" id="travel2" name="travel2" required placeholder="Hemresedatum" />
						<input type="number" id="adults" name="adults" required placeholder="Antal vuxna" min="1"/>
						
						
						<datalist id="airports">
							<option value="Stockholm">
							<option value="Oslo">
							<option value="Köpenhamn">
							<option value="London">
							<option value="Helsingfors">
						</datalist>
						
						
						<div id="info1">
						</div>
					</fieldset>
				</form>
			</div>
			
			<div id="step2" >
				<form>
					<fieldset>
						<legend>
							Steg 2
						</legend>
						
						Utresa
						<div id="plane1">
							Flygplan Plats1 - Plats2  tid1<br/>Mer info hejhej
						</div>
						
						<div id="plane2">
							Flygplan Plats1 - Plats2  tid2<br/>Mer info hejhej
						</div>
						
						Hemresa
						<div id="plane3">
							Flygplan Plats2 - Plats1  tid1<br/>Mer info hejhej
						</div>
						
						<div id="plane4">
							Flygplan Plats2 - Plats1  tid2<br/>Mer info hejhej
						</div>
				
						<div id="info2">
						</div>
					</fieldset>
					
				</form>
			</div>
			
			<div id="step3" >
					<fieldset>
						<legend>
							Steg 3
						</legend>
			
						Välj hotell
						<div id="hotel1">
							<img src="img/grandhotelsmall.png"></img>
							<div id ="hotel1name"> 
								<h2>
									Grand Hotel De Luxe&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									<img src="img/star.png"></img>
									<img src="img/star.png"></img>
									<img src="img/star.png"></img>
									<img src="img/star.png"></img>
									<img src="img/star.png"></img>
								</h2>
								<p>
									One of the most luxurous hotels in town. 
									Has everything and a little more.
									<a href="index.html" target="_blank">More Info</a>
								</p>
								
								<div id="typrum1">
									<form name = "select1form">
										Välj typ av rum:
										<select name = "select1" onChange = hotelRoomPrice(1)>
											<option value="Klass 3">Klass 3</option>
											<option value="Klass 2">Klass 2</option>
 											<option value="Klass 1">Klass 1</option>
 											<option value="Storlyx">Storlyx</option>
										</select>
									</form>
									<div id = "hotel1pris"> Pris: 200 €</div>
								</div>
									
							</div> 
						</div>
						
						<div id="hotel2">
							<img src="img/grafhotelsmall.png"></img>
							<div id ="hotel2name"> 
								<h2>
									Graf Moltke Hotel&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									<img src="img/star.png"></img>
									<img src="img/star.png"></img>
									<img src="img/star.png"></img>
									<img src="img/star.png"></img>
									<img src="img/graystar.png"></img>
								</h2>
								<p>
									A very popular hotel due to its outstanding service and
									close proximity to downtown. 
									<a href="index.html" target="_blank">More Info</a>
								</p>
								<div id="typrum2">
									<form name = "select2form">
										Välj typ av rum:
										<select name = "select2" onChange = hotelRoomPrice(2)>
											<option value="Standard">Standard</option>
											<option value="Awesome">Awesome</option>
 											<option value="Super Awesome">Super Awesome</option>
										</select>
										<div id = "hotel2pris"> Pris: 200 €</div>
									</form>
								</div>
							</div>
						</div>
						
						<div id="hotel3">
							<img src="img/kronprinzhotelsmall.png"></img>
							<div id ="hotel3name"> 
								<h2>
									Kronprinz Hotel&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									<img src="img/star.png"></img>
									<img src="img/star.png"></img>
									<img src="img/graystar.png"></img>
									<img src="img/graystar.png"></img>
									<img src="img/graystar.png"></img>
									
								</h2> 
								<p>
									This picturesque hotel lies in a quiet neighboorhood. It is known
									for its simple design and its close proximity to nature. 
									<a href="index.html" target="_blank">More Info</a>
								</p>
								<div id="typrum3">
									<form name = "select3form">
										Välj typ av rum:
										<select name = "select3" onChange = hotelRoomPrice(3)>
											<option value="Dubbelbäddsrum">Dubbelbäddsrum</option>
											<option value="Singelbäddsrum">Singelbäddsrum</option>
										</select>
									</form>
									<div id = "hotel3pris"> Pris: 140 €</div>
								</div>
							</div>
						</div>
						
						<div id="info3">
						</div>
					</fieldset>
			</div>
			
			<div id="step4" >
					<fieldset>
						<legend>
							Steg 4
						</legend>
			
						Tillval
						<div id="extra1">
							Bullar
						</div>
						<div id="extra2">
							Kakor
						</div>
						<div id="extra3">
							Bilar
						</div>
						<div id="extra4">
							Bussar
						</div>
						<div id="extra5">
							Knark
						</div>
						
					</fieldset>
			</div>
		
		</div>
		
		<div id="summary" >
			Inforuta kanske.<br/>
			Med snabblänkar till stegen och sånt.
		</div>
	</body>
</html>